<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>

    <link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <style>
        /* 页面整体样式 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }

        /* 容器样式 */
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex; /* 使用flexbox布局 */
            align-items: stretch; /* 使子元素高度一致 */
        }

        /* 封面图片样式 */
        .book-cover img {
            width: 100%;
            max-width: 200px; /* 限制封面宽度 */
            height: auto;
            border-radius: 20px;
            margin-right: 20px; /* 图片和文字之间的间距 */
        }

        /* 书籍信息容器 */
        .book-info {
            flex: 1; /* 让文字部分占据剩余空间 */
            display: flex;
            flex-direction: column; /* 使信息垂直排列 */
            justify-content: space-between; /* 信息之间的间隔 */
        }

        /* 书籍标题样式 */
        .book_name {
            font-size: 24px;
            margin-top: 0;
            color: #333;
        }

        /* 信息段落的样式 */
        p {
            font-size: 16px;
            margin: 4px 0; /* 缩小段落间距 */
            text-align: left; /* 文字左对齐 */
        }

        /* 首次通过时间的样式 */
        .firstPassTime {
            font-size: 14px; /* 缩小字体 */
            color: #888; /* 改变颜色 */
        }

        /* 列表项样式 */
        ul {
            list-style-type: none;
            padding: 0;
            width: 80%; /* 列表宽度设为80% */
            margin: 20px auto; /* 居中 */
        }

        li {
            margin: 5px 0; /* 缩小列表间距 */
            background-color: #f9f9f9;
            padding: 10px; /* 缩小内边距 */
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        li:hover {
            background-color: #e0e0e0;
        }

        a {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
            display: block;
        }

        a:hover {
            color: #0056b3;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 小屏幕上垂直布局 */
                align-items: center; /* 内容居中对齐 */
            }
           .book-cover {
                              align-items: center;
                              text-align: center;
            }
            .book-cover img {
                max-width: 50%; /* 图片宽度自动适应 */
                margin-bottom: 20px; /* 图片和文字之间的间距 */
                margin-left: 20px;
            }

            .book-info {
                text-align: center; /* 小屏幕上文字居中 */
            }
            ul {
            list-style-type: none;
            padding: 0;
            width: 100%; /* 列表宽度设为80% */
            margin: 20px auto; /* 居中 */
        }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="book-cover">
        <img src="{{ details['thumb_url'] }}" alt="书籍封面"/>
    </div>

    <div class="book-info">
        <h1 class="book_name">{{ details["book_name"] }}</h1>
        <p class="media">来源：{{ details["media"] }}小说</p>
        <p class="author">作者：{{ details["author"] }}</p>
        <p class="category">分类：{{ details["category"] }}</p>
        <p class="score">评分：{{ details["score"] }}</p>
        <p class="status">状态：{{ details["status"] }}</p>
        <p class="word_number">字数：{{ details["word_number"] }}</p>
        <p class="abstract">简介：{{ details["abstract"] }}</p>
    </div>
</div>
<div class="text-center mb-4">
    <a href="{{ url_for('download_page', book_name=details['book_name'], media=details['media'], author=details['author'], category=details['category'], score=details['score'], status=details['status'], word_number=details['word_number'], abstract=details['abstract'], book_id=details['book_id']) }}"
       class="btn btn-primary">
        下载书籍
    </a>
</div>
<ul class="item-list" id="itemList">
    {% for item in items %}
    <li>
        <a href="/online_reader?item_id={{ item['itemId'] }}&book_id={{ details['book_id'] }}&thumb_url={{ thumb_url }}">
            <p class="title">{{ item["title"] }}</p>
            <p class="firstPassTime">{{ item["firstPassTime"] }}</p>
        </a>
    </li>
    {% endfor %}
</ul>

<!-- 分页控制按钮，使用 Bootstrap 美化 -->
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        <li class="page-item">
            <button class="page-link" onclick="changePage(-1)" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </button>
        </li>
        <li class="page-item disabled">
            <span class="page-link" id="pageNumber">1</span>
        </li>
        <li class="page-item">
            <button class="page-link" onclick="changePage(1)" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </button>
        </li>
        <li class="page-item">
            <button class="page-link" onclick="openPageSelector()">跳转到</button>
        </li>
    </ul>
</nav>

<!-- 页数选择弹窗 -->
<div class="modal fade" id="pageSelectorModal" tabindex="-1" role="dialog" aria-labelledby="pageSelectorLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pageSelectorLabel">选择页数</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <select class="form-control" id="pageSelect">
                    <!-- 页数选项将在 JavaScript 中生成 -->
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="goToSelectedPage()">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
const itemsPerPage = 10;
let currentPage = 1;

const itemList = document.getElementById("itemList");
const items = Array.from(itemList.children);
const totalPages = Math.ceil(items.length / itemsPerPage);

// 显示指定页数
function displayPage(page) {
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;

    items.forEach((item, index) => {
        item.style.display = (index >= start && index < end) ? "block" : "none";
    });

    document.getElementById("pageNumber").textContent = page;
}

// 切换页面
function changePage(offset) {
    currentPage += offset;
    if (currentPage < 1) currentPage = 1;
    if (currentPage > totalPages) currentPage = totalPages;

    displayPage(currentPage);

    document.querySelector(".pagination .page-item:first-child").classList.toggle("disabled", currentPage === 1);
    document.querySelector(".pagination .page-item:last-child").classList.toggle("disabled", currentPage === totalPages);
}

// 显示页数选择器
function openPageSelector() {
    const pageSelect = document.getElementById("pageSelect");
    pageSelect.innerHTML = ''; // 清空之前的选项

    // 动态生成页数选项
    for (let i = 1; i <= totalPages; i++) {
        const option = document.createElement("option");
        option.value = i;
        option.textContent = `第 ${i} 页`;
        pageSelect.appendChild(option);
    }

    // 显示模态框
    $('#pageSelectorModal').modal('show');
}

// 跳转到选择的页数
function goToSelectedPage() {
    const selectedPage = parseInt(document.getElementById("pageSelect").value, 10);
    if (selectedPage >= 1 && selectedPage <= totalPages) {
        currentPage = selectedPage;
        displayPage(currentPage);
    }

    // 关闭模态框
    $('#pageSelectorModal').modal('hide');
}

// 初次加载第一页
displayPage(currentPage);
</script>
</body>
</html>